<template>
	<view class="content">
		<view class="today">
			<view class="todayTitle"><view class="txt">今日计划</view></view>
			<view class="planBox">
				<view class="planList" v-for="(item, index) in txtlist" :key="index">
					<view class="listDate">{{ item.time }}</view>
					<view class="listText">{{ item.text }}</view>
					<view class="listBottom">
						<view class="onoffswitch">
							<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked />
							<label class="onoffswitch-label" for="myonoffswitch"></label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="all">
			<view class="allTitle"><view class="txt">全部计划</view></view>
			<view class="allBox">
				<view class="allList" v-for="(item, index) in txtlist" :key="index">
					<view class="listDate">{{ item.time }}</view>
					<view class="listText">{{ item.text }}</view>
					<view class="listBottom">
						<view class="onoffswitch">
							<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" checked />
							<label class="onoffswitch-label" for="myonoffswitch"></label>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <text class="title">{{title}}</text> -->
		<NewBtn />
	</view>
</template>

<script>
	import NewBtn from '../../components/newBtn.vue'
export default {
	data() {
		return {
			title: '好',
			txtlist: [
				{
					time: '2020-03-15 08:00',
					text: '跑步'
				},
				{
					time: '2020-03-15 08:00',
					text: '学习'
				},
				{
					time: '2020-03-15 08:00',
					text: '飙车'
				},
				{
					time: '2020-03-15 08:00',
					text: '报警'
				},
				{
					time: '2020-03-15 08:00',
					text: '去医院'
				},
				{
					time: '2020-03-15 08:00',
					text: '去医院'
				},
				{
					time: '2020-03-15 08:00',
					text: '去医院'
				},
				{
					time: '2020-03-15 08:00',
					text: '去医院'
				}
			]
		};
	},
	onLoad() {},
	methods: {},
	components: {
		NewBtn
	}
};
</script>

<style lang="scss" scoped>
.content {
	display: flex;
	flex-direction: column;
	// align-items: center;
	justify-content: center;
	position: relative;
	top: 0;
	bottom: 0;
	
}

.today {
	height: 250rpx;
	width: 100%;
	// background-color: #4CD964;
	.todayTitle {
		height: 25%;
		.txt{
			font-size: $uni-font-size-lg;
		}
	}
	.planBox {
		display: -webkit-box;
		overflow-x: scroll;
		// -webkit-overflow-scrolling:touch;
		// position: relative;
		// width: 96%;
		// margin-left: 2%;
		height: 100%;
		&::-webkit-scrollbar {
			overflow: hidden;
		}
		.planList {
			height: 140rpx;
			width: 400rpx;
			// border: 6rpx solid black;
			box-shadow: 0px 6px 22px #e6e6e6;
			border-radius: 26rpx;
			padding: 5px 10px;
			margin-left: 10%;
			position: relative;
			margin-bottom: 40rpx;
		}
	}
}
.txt{
	font-size: $uni-font-size-lg;
}
.all {
	// position: fixed;
	// top: 420rpx;
	width: 92%;
	margin-left: 2%;
.txt{
	font-size: $uni-font-size-lg;
}
	.allBox {
		height: 810rpx;
		overflow-y: scroll;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		&::-webkit-scrollbar {
			width: 6rpx;
			overflow: hidden;
		}
		&::-webkit-scrollbar-thumb {
			background-color: #999dac;
			border-radius: 10px;
			border: 2px solid #32669a;
		}
		&::-webkit-scrollbar-track {
			border-radius: 10px;
			background-color: #bebebe;
		}
		.allList {
			width: 480rpx;
			// border: 6rpx solid black;
			box-shadow: 0px 6px 22px #e6e6e6;
			border-radius: 26rpx;
			padding: 10px 10px;
			margin-left: 10%;
			margin-top: 10rpx;
			margin-bottom: 26rpx;
			position: relative;
		}
	}
}

.txt {
	height: 80rpx;
	margin-left: 10%;
	font-size: 40rpx;
	font-weight: 800;
}

.listDate {
	font-size: 30rpx;
	margin-left: 4%;
	font-weight: 600;
}
.listText {
	margin-left: 4%;
	margin-top: 5%;
	font-size: 26rpx;
}
.listBottom {
	position: absolute;
	top: 50%;
	right: 2%;
	transform: translateY(-50%);
	.onoffswitch {
		position: relative;
		width: 69rpx;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}
	.onoffswitch-checkbox {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	.onoffswitch-label {
		display: block;
		overflow: hidden;
		cursor: pointer;
		height: 36rpx;
		padding: 0;
		line-height: 29rpx;
		border: 2rpx solid #49e845;
		border-radius: 29rpx;
		background-color: #49e845;
		transition: background-color 0.3s ease-in;
	}
	.onoffswitch-label:before {
		content: '';
		display: block;
		width: 29rpx;
		margin: 0px;
		background: #ffffff;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0px;
		border: 2rpx solid #e3e3e3;
		border-radius: 29rpx;
		transition: all 0.3s ease-in 0s;
	}
}
</style>
